<template>
  <template v-if="commonVar.layout === 'multiple'">
    <div class="container">
      <div class="parent-menu">
        <n-menu
          v-model:value="activeKey"
          :collapsed="true"
          :collapsed-width="64"
          :collapsed-icon-size="20"
          :options="parentMenu()"
          @update:value="onUpdate"
          :root-indent="15"
          :inverted="
            commonVar.layout === 'vertical'
              ? commonVar.headerInverted
              : commonVar.siderInverted
          "
        />
      </div>
      <n-divider vertical :style="dividerStyle" />
      <div class="child-menu" v-if="currentChildren">
        <n-menu
          v-model:value="activeKey"
          :collapsed-width="64"
          :collapsed-icon-size="20"
          :options="currentChildren"
          :root-indent="15"
          :indent="26"
          accordion
          :inverted="
            commonVar.layout === 'vertical'
              ? commonVar.headerInverted
              : commonVar.siderInverted
          "
        />
      </div>
    </div>
  </template>

  <template v-else-if="commonVar.layout === 'mix'">
    <n-menu
      v-model:value="activeKey"
      :collapsed-width="64"
      :collapsed-icon-size="20"
      :options="parentMenu()"
      @update:value="onUpdateWithMix"
      :root-indent="20"
      :indent="26"
      :accordion="commonVar.accordion"
      mode="horizontal"
      responsive
      :inverted="
        commonVar.layout === 'mix'
          ? commonVar.headerInverted
          : commonVar.siderInverted
      "
    />
  </template>

  <template v-else>
    <n-menu
      v-model:value="activeKey"
      :collapsed-width="64"
      :collapsed-icon-size="20"
      :options="menuOptions"
      :root-indent="20"
      :indent="26"
      :accordion="commonVar.accordion"
      :mode="commonVar.layout === 'vertical' ? 'horizontal' : 'vertical'"
      responsive
      :inverted="
        commonVar.layout === 'vertical'
          ? commonVar.headerInverted
          : commonVar.siderInverted
      "
      @update:value="changeRouter"
    />
  </template>
</template>

<script setup>
import { ref, onMounted, h, computed } from "vue";
import { NIcon } from "naive-ui";
import {
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
} from "@vicons/ionicons5";
import { useThemeStore } from "@/stores/models/theme";
import { useTagStore } from "@/stores/models/tag";
import { useBreadcrumbStore } from "@/stores/models/breadcrumb";
import { findSubMenuByLabel } from "@/utils/findMenuLabelUtils.js";
import { menuOptions } from "@/mock/menu";
import router from "@/router";

const themeStore = useThemeStore();
const tagStore = useTagStore();
const breadcrumbStore = useBreadcrumbStore();
const commonVar = themeStore.commonVar;
const horizontalTheme = themeStore.horizontalTheme;

onMounted(() => {});

//放置在菜单数据渲染前
const renderIcon = (icon) => {
  return () => h(NIcon, null, { default: () => h(icon) });
};

const activeKey = ref(null);

//过滤出父菜单
const parentMenu = () => {
  const temp = [];
  // 遍历菜单
  menuOptions.forEach((item) => {
    // 判断是否是父菜单
    temp.push({
      label: item.label,
      key: item.key,
      icon: renderIcon(BookIcon),
    });
  });
  return temp;
};

const currentChildren = ref(null);
const onUpdate = (key, item) => {
  currentChildren.value = null;
  //根据lable查询子菜单
  currentChildren.value = findSubMenuByLabel(menuOptions, item.label);
};

const onUpdateWithMix = (key, item) => {
  commonVar.mixMenuChildren = [];
  let temp = findSubMenuByLabel(menuOptions, item.label);
  if (temp !== null) {
    commonVar.mixMenuChildren = temp;
  }
};

const dividerStyle = computed(() => ({
  height: `calc(100vh - ${horizontalTheme.headerHeight}px - 4px)`,
}));

//路由跳转
const changeRouter = (key, item) => {
  router.push({ path: key });
  //添加页签
  tagStore.setTagList(item);
  //添加面包屑
  breadcrumbStore.setBreadcrumb(item);
 }
</script>
<style scoped lang='scss'>
.container {
  display: flex;
  width: 100%;

  .parent-menu {
    width: 64px;
    height: 100%;
  }

  .child-menu {
    flex: 1;
    height: 100%;
  }
}
</style>